<template>
	<van-tabbar class="tabbar" v-model="current" active-color="#3423DA" inactive-color="#828282" :border="false">
		<van-tabbar-item v-for="(item,i) in tabbar" :name="i" :to="item.path" :key="item.key">
			<span>{{ item.label }}</span>
			<template #icon="props">
				<image class="icon" mode="widthFix" :src="`./static/tabbar/${item.key}${current===i?'-active':''}.png`">
				</image>
			</template>
		</van-tabbar-item>
	</van-tabbar>
</template>

<script>
	export default {
		props: ['active'],
		updated() {
			this.current = this.active
		},
		created() {
			this.current = this.active
		},
		data() {
			return {
				current: 0,
				tabbar: [{
					path: "/pages/index/index",
					key: "home",
					label: '首页'
				}, {
					path: "/pages/my/index",
					key: "my",
					label: '我的'
				}]
			}
		},
	}
</script>

<style lang="scss" scoped>
	.tabbar {
		box-shadow: 0 -5rpx 7rpx 0 rgba(0, 0, 0, 0.13);
	}

	.icon {
		width: 44rpx;
	}

	::v-deep {

		.van-tabbar-item__text {
			font-size: 20rpx;
		}

		.van-tabbar-item__icon {
			// margin-top: -30rpx;
		}
	}
</style>